<template>
  <div>
    <section class="head">
      <div class="back-icon">
        <div class="icon-wrapper" @touchstart="onTouchStart">
          <i class="iconfont icon-fanhui" @click="back" />
        </div>
      </div>

      <div class="title">
        圈子
      </div>

      <div class="operations" :style="menuStyle">
        <!-- <img src="../assets/logo.png" class="avatar"> -->
        <div class="icon-wrapper menu-icon" @touchstart="onTouchStart">
            <i class="iconfont icon-shezhi" @click="toSetting" />
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  import Utils from '../tools/utils'
  export default {
    methods: {
      toSetting () {
        if (!Utils.checkUserCode()) {
          return
        }
        Utils.buryPoint('22003')
        this.$router.push('/settings')
      },

      back () {
        this.$router.go(-1)
      },

      onTouchStart () {}
    },

    computed: {
      menuStyle () {
        return {
          visibility: this.$route.name === 'Settings' ? 'hidden' : 'visible'
        }
      }
    }
  }
</script>

<style scoped lang="less">
@import "./common/mixins.less";

  .head {
    height: 45px;
    position: fixed;
    z-index: 9999;
    display: -webkit-box;
    top: 0;
    left: 0;
    width: 100%;
    background-image: url(../assets/beijing_3x.jpg);
    background-size: cover;
    background-position: 0 0;
  }

  .title {
    -webkit-box-flex: 1;
    text-align: center;
    color: #FFF;
    height: 45px;
    line-height: 45px;
    font-size: 17px;/*no*/
  }

  .back-icon, .operations {
    width: 30%;
  }

  .operations {
    .vertical-center;
    -webkit-box-pack: end;
  }

  .avatar {
    display: inline-block;
    width: 29px;
    height: 29px;
    border-radius: 99px;
    border: 1px solid #A4E3FF;/*no*/
    margin-right: 2px;
  }

  .back-icon {
    line-height: 45px;
    text-align: left;
    display: -webkit-box;
    -webkit-box-align: center;
  }

  .icon-wrapper {
    width: 30px;
    height: 30px;
    border-radius: 99px;
    box-sizing: border-box;
    background-color: #3E99D1;
    margin-left: 11px;
    border: 1px solid #A4E3FF;/*no*/
    .flexLayout();
    // text-align: center;
    // line-height: 30px;
    &:active {
      background-color: #FFF;

      i {
        color: #9d9d9d;
      }
    }

    i {
      font-size: 18px;/*no*/
      color: #FFF;
      opacity: 0.7;
    }
  }

  .menu-icon {
    margin-right: 13px;
  }
</style>
